<template>
  <yt-page title="会议详情" scroll>
    <yt-form :model="form" :rules="rules">
      <yt-card title="基本信息">
        <yt-cell label="组织单位">{{ currentData.sending_department }}</yt-cell>
        <yt-cell label="会议开始时间" labelWidth="120px">{{ currentData.meeting_start_time }}</yt-cell>
        <yt-textarea title="会议主题" border="none" type="column" v-model="currentData.title" disabled></yt-textarea>
      </yt-card>
      <yt-card title="附件">
        <yt-cell-open-file :title="file.name" :url="file.url" :key="index" v-for="(file, index) in currentData.file">
          {{ file.name }}
        </yt-cell-open-file>
        <p class="card-no-data" v-if="!currentData.file">暂无附件</p>
      </yt-card>
      <yt-card title="参会人员" btn="添加参会人员" @btn-click="goAddPerson">
        <p class="card-cell c-gray">
          <span>姓名</span>
          <span>职务</span>
          <span>联系电话</span>
        </p>
        <p class="card-cell" v-for="(person, index) of form.peopleList" :key="index">
          <span>{{person.name}}</span>
          <span>{{person.position}}</span>
          <span>{{person.telephone}}</span>
        </p>
      </yt-card>
      <yt-btn slot="btn" v-if="form.state === 0" :loading="onSign" edge>签收</yt-btn>
      <yt-btn slot="btn" v-if="form.state === 1" :loading="onReport" edge validator>上报</yt-btn>
    </yt-form>
  </yt-page>
</template>

<script>
import { EVENTS, BUS } from '@/store'
import { commonApi } from '@/common/api/commonApi.js'
import { ReplaceDictionary } from '@/common/utils/index.js'

export default {
  data() {
    return {
      currentData: {},
      form: {},
      rules: {
        peopleList: {
          type: 'array',
          required: true,
          message: '请添加参会人员!'
        }
      }
    }
  },
  created() {
    BUS.$on(EVENTS.messageMettingPersonList, list => {
      this.form = { ...this.form, peopleList: list }
    })
  },
  async activated() {
    if (this.$router.$isBack) return
    let p = [
      commonApi.dictionary('sending_department'),
      commonApi.searchById('WJ_conference_notice', this.$route.query.id),
      commonApi.searchById('WJ_conference_record', this.$route.query.recordId)
    ]
    let [department, data, record] = await Promise.all(p)
    this.form = record
    this.currentData = ReplaceDictionary(data, {
      sending_department: department
    })
  },
  methods: {
    async onSign(loaded) {
      try {
        await commonApi.save('WJ_conference_record', {
          id: this.form.id,
          state: 1
        })
        this.form.state = 1
        this.$Toast('签收成功!', 'success')
      } catch (e) {
        this.$Toast('签收失败!', 'error')
      }
      loaded()
    },
    async onReport(loaded) {
      try {
        await commonApi.save('WJ_conference_record', {
          id: this.form.id,
          state: 2,
          peopleList: this.form.peopleList
        })
        this.form.state = 2
        this.$Toast('上报成功!', 'success')
      } catch (e) {
        this.$Toast('上报失败!', 'error')
      }
      loaded()
    },
    goAddPerson() {
      this.$router.$push({
        path: '/message/add-meeting-person',
        query: { data: this.form.peopleList }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.title
  text-align center
  margin 15px
  font-weight bold
  font-size 18px

.desc
  font-size 14px
  color #666
  clear both

  span
    margin 10px

  .left
    float left

  .right
    float right

.content
  text-indent 10px
  font-size 14px
  padding 0 10px
  min-height 100px
  line-height 30px
  color #222

.card-no-data
  color #ddd
  font-size 14px
  text-align center

.card-cell
  padding 10px
  display flex
  justify-content space-between

  span
    display inline-block
    width 30%
    text-align left
</style>
